<template>
  <div>
    <h2 class="first">
      <span class="second">你好啊</span>
    </h2>
     <MySchool></MySchool>
     <hr>
     <MyStudent></MyStudent>
  </div>
</template>

<script>
/**
 * (1) 如果有多个组件定义的样式选择器名字相同，则后引入的组件样式会覆盖前面的
 *     如果想让各个组件的样式给自己使用，避免冲突，则可以在各个组件中加scrope
 * */ 
 import MySchool from './components/MySchool.vue'
 import MyStudent from './components/Student.vue'

  export default {
      name:'App',
      components:{
        MySchool,
        MyStudent
      }
  }
</script>

<!-- (3) style可以选择样式类型，不写默认css -->
<style lang="less">
/* (2) App里面的样式选择器，可以给任何一个组件使用，因为它是组件大哥 */
   .first{
      background-color: darkgrey;
      .second{
         font-size: 40px;
      }
   }
</style>